<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
    
</head>

<body>
    <div id="app"></div>
    <template id="root">
        <div>
            <my-header @add-task="handleTask"></my-header>
            <my-list :message="message"></my-list>


        </div>
    </template>
    <template id="header">
        <div>
            <input type="text" v-model="task">
            <button @click="addTask">添加</button>
       </div>
    </template>
    <!-- <template id=myItem">
        <div>
            <ul></ul>
       </div>
    </template> -->
    <template id="mylist">
        <div>
            <ul>
                <li v-for="(s,index) in tasks" :key="index">{{s.task}}<button @click="deleteTask(index)">删除</button></li>
            </ul>
            
        </div>
    </template>
</body>
<script>
    const {ref,reactive,watch} = Vue
    const app = Vue.createApp({
        template:'#root',
        setup(){
            let message = ref([])
            let handleTask = (task)=>{
               message.value=task

            }
            return {
                message,
                handleTask
            }
        }

    })
    app.component('MyHeader',{
        template:'#header',
       setup(props,{ emit }){
        let task= ref('')
        let addTask = ()=>{
            emit('addTask',{"task":task.value})
        }
        return {
            task,
            addTask
        }
       }
    })
    app.component('MyList',{
        template:'#mylist',
        props:{message:Array},
        setup(props,{emit}){
            // 创建遍历的数组
            let tasks = reactive([])
            watch(()=>props.message,(nvalue,ovlaue) =>{
                tasks.push(nvalue)

            })
            let deleteTask = (e)=>{
                tasks.splice(e,1)
            }
            return{
                tasks,
                deleteTask
            }

        }
        

    })
    app.mount('#app')
</script>

</html>